<!DOCTYPE html>
<html lang="en">
<title> </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/tachyons/css/tachyons.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="devicon/style.css">
<!--<link rel="stylesheet" href="debug.css">-->

<body>
    <!-- Banner -->
    <div class="w-100 bg-1 ph5-ns ph3 text-light">
        
        <nav class="db dt-l w-100 mw8 center border-box pv3">
            <a class="db dtc-l v-mid link dim w-100 w-25-l tc tl-l mb2 mb0-l white" href="#" title="Home">
                <img src="logo.svg" class="dib w4 h3" alt="CodeBlocQ">
            </a>
            <div class="db dtc-l v-mid w-100 w-75-l tc tr-l">
                <a class="link dim f6 f5-l dib mr3 mr4-l white" href="#" title="Home">Home</a>
                <a class="link dim f6 f5-l dib mr3 mr4-l white" href="#" title="How it Works">How it Works</a>
                <a class="link dim f6 f5-l dib mr3 mr4-l white" href="#" title="Blog">Blog</a>
                <a class="link dim f6 f5-l dib mr3 mr4-l white" href="#" title="Press">Press</a>
                <a class="link dim f6 f5-l dib white" href="#" title="Contact">Contact</a>
            </div>
        </nav>

        <!-- Title -->
        <div class="w-100 mw8 center dt vh-40">
            <div class="dtc v-mid white">
                <h1 class="f1-l f2-m ">Software Development Blog.</h1>
                <p class="f4 fw3 pab-100px">by Jonathan Klughertz</p>
            </div>
        </div>

        <!-- Icon -->
        <div class="relative w-100 mw8 center white dn dn-m db-ns">
            <div class="lamp pointer">
                <div class="pa bg foot"></div>
                <div class="pa bg leg-1"></div>
                <div class="pa bg knee"></div>
                <div class="pa bg leg-2"></div>
                <div class="pa neck-mask">
                    <div class="pa bg neck"></div>
                </div>
                <div class="pa head-mask-1">
                    <div class="pa head-mask-2">
                    <div class="pa bg head"></div>
                    </div>
                </div>
                <div class="pa nose-mask">
                    <div class="pa bg nose"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Content -->
    <div class="w-100 content ph2 ph4-m ph5-l mv5 mv6-l">
        <div class="mw8 center">
            <div class="dt w-100 hover-color pointer pa3 border-color bl mv4">
                <div class="dtc v-mid w-90 black-70">
                    <span class="f5 fw3 lh-copy pr4">14 March 2016</span> <a class="fw3" href="#">#Books</a> <a class="fw3" href="#">#Ego</a> <a class="fw3" href="#">#Self-help</a>
                    <br />
                    <span class="f3 fw3 lh-copy">Notes on Ego is the Ennemy by Ryan Holiday<span>
                </div>
                <div class="dtc v-mid w-10 f1 black-50 tr">
                    <span class="devicon-book3"></span>
                </div>
            </div>
            <div class="dt w-100 hover-color pointer pa3 border-color bl mv4">
                <div class="dtc v-mid w-90 black-70">
                    <span class="f5 fw3 lh-copy pr4">14 March 2016</span> <a class="fw3" href="#">#Books</a> <a class="fw3" href="#">#Ego</a> <a class="fw3" href="#">#Self-help</a>
                    <br />
                    <span class="f3 fw3 lh-copy">Preformance Comparison: ES6 Templates Literals vs Handlebars in Node<span>
                </div>
                <div class="dtc v-mid w-10 f1 black-50 tr">
                    <span class="devicon-book3"></span>
                </div>
            </div>
            <div class="dt w-100 hover-color pointer pa3 border-color bl mv4">
                <div class="dtc v-mid w-90 black-70">
                    <span class="f5 fw3 lh-copy pr4">14 March 2016</span> <a class="fw3" href="#">#Books</a> <a class="fw3" href="#">#Ego</a> <a class="fw3" href="#">#Self-help</a>
                    <br />
                    <span class="f3 fw3 lh-copy">Notes on Ego is the Ennemy by Ryan Holiday<span>
                </div>
                <div class="dtc v-mid w-10 f1 black-50 tr">
                    <span class="devicon-book3"></span>
                </div>
            </div>
            <div class="dt w-100 hover-color pointer pa3 border-color bl mv4">
                <div class="dtc v-mid w-90 black-70">
                    <span class="f5 fw3 lh-copy pr4">14 March 2016</span> <a class="fw3" href="#">#Books</a> <a class="fw3" href="#">#Ego</a> <a class="fw3" href="#">#Self-help</a>
                    <br />
                    <span class="f3 fw3 lh-copy">Notes on Ego is the Ennemy by Ryan Holiday<span>
                </div>
                <div class="dtc v-mid w-10 f1 black-50 tr">
                    <span class="devicon-book3"></span>
                </div>
            </div>
            <div class="dt w-100 hover-color pointer pa3 border-color bl mv4">
                <div class="dtc v-mid w-90 black-70">
                    <span class="f5 fw3 lh-copy pr4">14 March 2016</span> <a class="fw3" href="#">#Books</a> <a class="fw3" href="#">#Ego</a> <a class="fw3" href="#">#Self-help</a>
                    <br />
                    <span class="f3 lh-copy">Notes on Ego is the Ennemy by Ryan Holiday<span>
                </div>
                <div class="dtc v-mid w-10 f1 black-50 tr">
                    <span class="devicon-book3"></span>
                </div>
            </div>
            <div class="dt w-100 hover-color pointer pa3 border-color bl mv4">
                <div class="dtc v-mid w-90 black-70">
                    <span class="f5 fw3 lh-copy pr4">14 March 2016</span> <a class="fw3" href="#">#Books</a> <a class="fw3" href="#">#Ego</a> <a class="fw3" href="#">#Self-help</a>
                    <br />
                    <span class="f3 lh-copy">Notes on Ego is the Ennemy by Ryan Holiday<span>
                </div>
                <div class="dtc v-mid w-10 f1 black-50 tr">
                    <span class="devicon-book3"></span>
                </div>
            </div>
            <div class="dt w-100 hover-color pointer pa3 border-color bl mv4">
                <div class="dtc v-mid w-90 black-70">
                    <span class="f5 fw3 lh-copy pr4">14 March 2016</span> <a class="fw3" href="#">#Books</a> <a class="fw3" href="#">#Ego</a> <a class="fw3" href="#">#Self-help</a>
                    <br />
                    <span class="f3 lh-copy">Notes on Ego is the Ennemy by Ryan Holiday<span>
                </div>
                <div class="dtc v-mid w-10 f1 black-50 tr">
                    <span class="devicon-book3"></span>
                </div>
            </div>
            <div class="dt w-100 hover-color pointer pa3 border-color bl mv4">
                <div class="dtc v-mid w-90 black-70">
                    <span class="f5 fw3 lh-copy pr4">14 March 2016</span> <a class="fw3" href="#">#Books</a> <a class="fw3" href="#">#Ego</a> <a class="fw3" href="#">#Self-help</a>
                    <br />
                    <span class="f3 lh-copy">Notes on Ego is the Ennemy by Ryan Holiday<span>
                </div>
                <div class="dtc v-mid w-10 f1 black-50 tr">
                    <span class="devicon-book3"></span>
                </div>
            </div>
        </div>
    </div>

    <!-- Footer -->
    <div class="bg-1 ph2 ph5-ns pv5">
        <div class="mv8">
            <div class="center tc">
                <div class="dib mh3">
                    <a class="f3 f2-ns white dim" href="https://github.com/klugjo">
                        <i class="fa fa-github"></i>
                    </a>
                </div>
                <div class="dib mh3">
                    <a class="f3 f2-ns white dim" href="https://www.facebook.com/">
                        <i class="fa fa-facebook"></i>
                    </a>
                </div>
                <div class="dib mh3">
                    <a class="f3 f2-ns white dim" href="https://www.instagram.com/">
                        <i class="fa fa-instagram"></i>
                    </a>
                </div>
                <div class="dib mh3">
                    <a class="f3 f2-ns white dim" href="https://www.twitter.com/">
                        <i class="fa fa-twitter"></i>
                    </a>
                </div>
            </div>
            <div class="f6 f5-ns center tc white pt5 fw3">
                &copy 2017 All right reserved | Theme Jonathan Klughertz | Powered by hexo
            </div>
        </div>
    </div>
</body>
</html>